<template>
  <div :id="id" style="height:290px"></div>
</template>

<script>
import { getMonthReport } from "../../api/workStation/handle";
export default {
  name: "BarChart",
  data() {
    return {
      dates: [],
      datas: [],
      option: {
        xAxis: {
          type: "category",
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: "value",
          minInterval : 1
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      }
    };
  },
  props: {
    id: {
      type: String,
      default: ""
    }
  },
  mounted() {
    getMonthReport().then(res => {
      res.data.forEach(r => {
        this.dates.push(r.date);
        this.datas.push(r.workStationOrderNum);
      });
      let chartDom = document.getElementById(this.id);
      let myChart = this.$echarts.init(chartDom);
      this.option.xAxis.data = this.dates;
      this.option.series[0].data = this.datas;
      myChart.setOption(this.option);
    });
  }
};
</script>

<style scoped>
</style>
